<template>
  <div id="index">
    <div class="bg">
      <div class="dragLeft"></div>
      <div class="drag"></div>
      <div class="dragRight"></div>
    </div>
    <div class="content">
      <div class="logo"><img :src="logo"></div>
      <div class="title">
  　　　　<div class="line"></div>
  　　　　<div class="text">{{rangeValue}}</div>
  　　　　<div class="line"></div>
  　　</div>
      <div class="tips">请选择用餐人数</div>
      <div class="range">
        <mt-range
          v-model="rangeValue"
          :min="1"
          :max="20"
          :step="1"
          :bar-height="4">
        </mt-range>
      </div>
      <div class="subWap">
        <router-link to="/List"><mt-button class='submit' @click.native="setNumber">确定</mt-button></router-link>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'index',
  data () {
    return {
      logo: 'https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3866406035,3609273039&fm=85&s=9D0261970AF7269812444DB103005063',
      rangeValue: this.$store.state.peopleNumber
    }
  },
  methods:{
    setNumber(){
      this.$store.commit('setNumber', this.rangeValue);
    }
  },
  mounted () {
    this.$http('/pos/WeChat/getPccode.do').then((res) => {
      this.logo = _.isEmpty(res.data.result.logo)?this.logo:res.data.result.logo
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
#index{
  background: url(../../assets/images/bg01.jpg);height: 100%;background-size: cover;overflow: hidden;position: relative;
  .bg{background:linear-gradient(to bottom,#232323,#636363);width: 100%;height:100%;position: absolute;z-index: 9;margin-top:5.706667rem;top: 0;bottom: 0;}
  .drag{filter: blur(25px);height: 100px;position: absolute;z-index: 8;background-color:#232323;width: 100%; top: -60px;}
  .dragLeft{filter: blur(25px);position: absolute;left:0 ;width: 25px;height: 100px;top: -50px;background-color:#232323;}
  .dragRight{filter: blur(25px);position: absolute;right: 0;width: 25px;height: 100px;top: -50px;background-color:#232323;}
  .content{position: relative;z-index: 999;}
  .logo {text-align: center;padding-top:1.22rem;}
  .logo img{width:3rem;height:3rem;margin: 0 auto;border-radius: 50%;}
　.title{width:5.466667rem;display:flex;margin:1.8rem auto 0 auto;}
　.line{flex:1;border-top:1px solid rgba(255,255,255,0.7);position: relative;top:1.0rem;margin: 0 0.266667rem;}
　.text{padding:0 0.16rem;font-size:1.8rem;color: #fff;}
  .tips{color: #fff;text-align: center;margin-top: 0.2rem;}
  .mt-range-runway{background: #606061;opacity: 0.5;}
  .mt-range-progress{background: #fff;}

  .subWap{width:4.0rem;margin: 0 auto;height:1.333333rem;}
  .submit{background: #cba162;width:100%;text-align: center;color: #fff;height: 100%;font-size: 0.5rem;}
  .range{background: #4c4c4d;border-radius: 0.106667rem;margin:1.466667rem 0.44rem;padding:0.133333rem 0;}

  .mt-range-content{margin-right:0.7rem;}
  .mt-range{height:1.266667rem;line-height: 1.266667rem;width: 8rem;margin: 0 auto;}
  .mt-range-thumb{position: relative;background:radial-gradient(#fff, #ddd, #666);width: 0.933333rem;height: 0.933333rem;top:0.16rem;}
  .mt-range-thumb:before{
    content: "\e61c";
    top: -0.155rem;
    left: 0.24rem;
    position: absolute;
    color: #aaa;
    font-size: 0.46rem;
    font-weight: bold;
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
